<template>
  <div>
    <!--  用来写小交叉的结构  -->

  </div>
</template>

<script>
import *as echarts from 'echarts';

export default {
  name: "XcViews",
  methods: {
    drawLine() {
      let myCharts = echarts.init(document.getElementById("techCharts"));
      let charts = {
        nodes: [ // 节点
          {name: '流程1', value: [0, 500]},

          {name: '流程2', value: [150, 500]},

          {name: '流程3', value: [300, 500]},

          {name: '流程4', value: [450, 500]},

          {name: '流程5', value: [600, 500]},

          {name: '流程6', value: [750, 500]},

          {name: '流程7', value: [900, 500], symbol: "roundRect", symbolSize: [70, 40],},

          {name: '流程8', value: [450, 700]},

          {name: '流程9', value: [450, 300]},

          {name: '流程10', value: [150, 200], symbol: "diamond", symbolSize: [110, 60],},

        ],

        linesData: [ // 连线

          {name: '', coords: [[0, 500], [130, 500]]},

          {name: '', coords: [[175, 500], [275, 500]]},

          {name: '', coords: [[275, 500], [425, 500]]},

          {name: '', coords: [[425, 500], [575, 500]]},

          {name: '', coords: [[575, 500], [725, 500]]},

          {name: '', coords: [[725, 500], [875, 500]]},

          {
            name: '', coords: [ // 关于折线要分两个方向，第一个方向无symbol

              [300, 500],

              [300, 700]

            ], symbol: 'none'
          },

          {
            name: '', coords: [

              [300, 700],

              [425, 700]

            ]
          },

          {
            name: '', coords: [

              [475, 700],

              [600, 700]

            ], symbol: 'none'
          },

          {
            name: '', coords: [

              [600, 700],

              [600, 545]

            ]
          },

          {
            name: '', coords: [

              [300, 500],

              [300, 300]

            ], symbol: 'none'
          },

          {
            name: '', coords: [

              [300, 300],

              [425, 300]

            ]
          },

          {
            name: '', coords: [

              [425, 300],

              [600, 300]

            ], symbol: 'none'
          },

          {
            name: '', coords: [

              [600, 300],

              [600, 455]

            ]
          },

          {
            name: '', coords: [

              [0, 500],

              [0, 200]

            ], symbol: 'none'
          },

          {
            name: '不驳回', coords: [

              [0, 200],

              [120, 200]

            ]
          },

          {
            name: '驳回', coords: [

              [175, 200],

              [900, 200]

            ], symbol: 'none'
          },

          {
            name: '', coords: [

              [900, 200],

              [900, 455]

            ]
          },

        ]

      }
      let option = {
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: "value",
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: "value",
        },

        grid: {
          left: 50,
          right: 0,
          bottom: 0,
          top: 0
        },

        tooltip: {
          show: false,
          axisPointer: {
            type: "shadow",

          },
          borderColor: "white",
          backgroundColor: "white",
          borderWidth: 1,
          padding: 5,
          textStyle: {
            fontSize: 14,
            color: '#333',
          },

        },

        series: [
          {
            type: "graph",
            coordinateSystem: "cartesian2d",
            symbol: "rect",
            symbolSize: [80, 40],
            // edgeSymbol: ['', 'arrow'],
            // edgeSymbolSize: [1, 10],
            lineStyle: {

              normal: {

                width: 0,

                color: 'green'

              }

            },

            itemStyle: {

              color: "rgb(194, 194, 194)",

            },

            symbolOffset: [10, 0],

            force: {

              edgeLength: 100,//连线的长度

              repulsion: 150 //子节点之间的间距

            },

            label: {

              show: true,

              color: '#333', // 节点文字颜色

            },

            data: charts.nodes

          },

          {

            type: "lines",

            polyline: false,

            coordinateSystem: "cartesian2d",

            lineStyle: {

              // type: "dashed",

              opacity: 0.5,

              width: 3,

            },

            symbol: ['', 'arrow'],

            symbolSize: 10,

            label: {

              show: true,

              position: "middle",

              fontSize: 16,

              color: '#333',

              formatter: function (args) {

                let val = args.data.name;

                var strs = val.split("");

                var str = "";

                if (args.data.linkView) {

                  for (var i = 0, s; (s = strs[i++]);) {

                    str += s;

                    if (!(i % 15)) str += "\n";

                  }

                  return str;

                }

                for (var i = 0, s; (s = strs[i++]);) {

                  str += s;

                  if (!(i % 15)) str += "\n";

                }

                return str;

              },

            },

            lineStyle: {

              color: '#65B7E3',

              width: 2

            },

            data: charts.linesData,

          },

        ],

      };

      myCharts.clear();

      myCharts.setOption(option);

    }
</script>

<style scoped>

</style>